{% extends "docker_engine/base.html" %}


{% load staticfiles %}

{% block extra-css %}
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/uniform/css/uniform.default.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/assets/bootstrap/css/bootstrap-fileupload.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'docker_engine/css/application/new.css' %}" />
{% endblock %}


{% block content %}
<div id="page" class="dashboard">
    <!-- BEGIN SAMPLE FORM PORTLET-->   
    <div class="widget">
        <div class="widget-title">
            <h4><i class="icon-reorder"></i> New Application</h4>                   
        </div>
        <div class="widget-body form">
            <!-- BEGIN FORM-->
            <form action="/docker/application/create/" method="post" class="form-horizontal" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="control-group">
                    <label class="control-label" for="application_name">Application Name</label>
                    <div class="controls">
                        <input type="text" class="span6 popovers" name="application_name" data-trigger="hover" data-content="Name the application you prepare to create." data-original-title="Application Name" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">Definition File</label>
                    <div class="controls">
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="input-append">
                                <div class="uneditable-input span3">
                                    <i class="icon-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                <span class="btn btn-file">
                                    <span class="fileupload-new">Select file</span>
                                    <span class="fileupload-exists">Change</span>
                                    <input type="file" class="default" name="definition_file" />
                                </span>
                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                            </div>
                        </div>
                    </div>
                </div>

                <hr />

                <div class="control-group">
                    <label class="control-label"><b>Resource Requirement</b></label>
                </div>

                <div class="control-group">
                    <label class="control-label" >CPU Cores</label>
                    <div class="controls">
                        <select class="span4 chosen" data-placeholder="Choose CPU cores" name="cpu_limit" tabindex="1">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                        </select>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="memory_limit">Memory Capacity</label>
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <input class="input-large" name="memory_limit" type="text" /><span class="add-on">GB</span>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="io_read_limit">I/O Limit</label>
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <input class="input-large" name="io_read_limit" type="text" placeholder="Read Speed" /><span class="add-on">MB/s</span>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <input class="input-large" name="io_write_limit" type="text" placeholder="Write Speed" /><span class="add-on">MB/s</span>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="net_send_limit">Network Limit</label>
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <input class="input-large" name="net_send_limit" type="text" placeholder="Send Speed" /><span class="add-on">MB/s</span>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend input-append">
                            <input class="input-large" name="net_receive_limit" type="text" placeholder="Receive Speed" /><span class="add-on">MB/s</span>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <a href="{% url 'application_create' %}"><button type="submit" class="btn btn-primary">Create</button></a>
                    <a href="{% url 'application_index' %}"><button type="button" class="btn">Cancel</button></a>
                </div>
            </form>
            <!-- END FORM-->             
        </div>
    </div>
    <!-- END SAMPLE FORM PORTLET-->
</div>
{% endblock %}


{% block extra-js %}
<script src="{% static 'docker_engine/assets/chosen-bootstrap/chosen/chosen.jquery.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/uniform/jquery.uniform.min.js' %}"></script>
<script src="{% static 'docker_engine/assets/fancybox/source/jquery.fancybox.pack.js' %}"></script>
<script src="{% static 'docker_engine/assets/bootstrap/js/bootstrap-fileupload.js' %}"></script>
<script src="{% static 'docker_engine/js/application/all.js' %}"></script>
<script src="{% static 'docker_engine/js/application/new.js' %}"></script>
{% endblock %}